<template>
  <!-- 系统用户 首页 -->
  <el-dialog
    v-el-drag-dialog
    title="系统用户详情"
    :visible.sync="crud.status.info > 0"
    :before-close="crud.closeInfo"
  >
    <div class="info_detail_dialog__body">
      <el-card v-loading="crud.infoLoading" class="box-card" shadow="hover">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基础信息" name="user">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">详情ID: </div><div class="info_detail_value">{{ info.id }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">用户名: </div><div class="info_detail_value">{{ info.username || '-' }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">手机号: </div><div class="info_detail_value">{{ info.mobile || '-' }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">邮箱: </div><div class="info_detail_value">{{ info.email || '-' }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">昵称: </div><div class="info_detail_value">{{ info.nickname || '-' }}</div></el-col>
              <!-- 创建类型 1：后台添加 ，0: 用户注册 -->
              <!-- 智能推断为字典类型, 字典类型为 dict.sys_user_create_type -->
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">创建类型: </div><div class="info_detail_value">{{ dict.label.sys_user_create_type[info.createType] || '未知字典码:'+info.createType }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">默认组织id: </div><div class="info_detail_value">{{ info.defDepid || '-' }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后登录时间: </div><div class="info_detail_value">{{ info.lastLogin || '-' }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次登录ip: </div><div class="info_detail_value">{{ info.lastIp || '-' }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次登录地: </div><div class="info_detail_value">{{ info.lastIpDes || '-' }}</div></el-col>
              <!-- 状态值，字典取值 -->
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">状态: </div><div class="info_detail_value">{{ dict.label.sys_user_status[info.status] || '未知字典码:'+info.status }}</div></el-col>

              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">创建时间:</div><div class="info_detail_value">{{ info.createTime || '-' }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">创建人:</div><div class="info_detail_value">{{ info.createUserName || '-' }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次修改时间:</div><div class="info_detail_value">{{ info.updateTime || '-' }}</div></el-col>
              <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次修改人:</div><div class="info_detail_value">{{ info.updateUserName || '-' }}</div></el-col>
              <!-- <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">是否被删除数据:</div><div class="info_detail_value">{{ info.isDel?'否':'是' }}</div></el-col> -->
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="详细信息" name="userInfo">
            <user-info :user-info="info.userInfo?info.userInfo:defUserInfo" />
          </el-tab-pane>
          <el-tab-pane label="角色信息" name="userRole">
            <user-role :user-roles="role.userRoles" />
          </el-tab-pane>
          <el-tab-pane label="组织信息" name="userDep">
            <user-deps :user-deps="dep.userDeps" />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import CRUD, { info } from '@crud/crud'
import UserInfo, { defaultUserInfo } from './UserInfo/info'
import UserRole from './UserRole/info'
import userDeps from './UserDep/info'
import { getRolesByUserId } from '@/api/sys/UserRole'
import { getUserDeps } from '@/api/sys/UserDep'
// 系统用户 - model
export const defaultInfo = {
  id: null, // id
  username: null, // 用户名
  mobile: null, // 手机号
  email: null, // 邮箱
  nickname: null, // 显示的名字
  createType: null, // 创建类型 1：后台添加 ，0: 用户注册
  defDepid: null, // 默认组织id
  lastLogin: null, // 最后登录时间
  lastIp: null, // 最后一次登录ip
  lastIpDes: null, // 最后一次登录ip地址描述
  status: 1,
  lockVersion: 0,
  createTime: null,
  createUserName: null,
  updateTime: null,
  updateUserName: null,
  // _parentInfo: {},
  isDel: 0,
  userInfo: defaultUserInfo
}
export default {
  components: {
    UserInfo,
    UserRole,
    userDeps
  },
  directives: { elDragDialog },
  mixins: [info(defaultInfo)],
  dicts: [
    'sys_user_create_type',
    'sys_user_status'
  ], // 字典
  data() {
    return {
      activeName: 'user',
      defUserInfo: defaultUserInfo,
      role: {
        userRoles: []
      },
      dep: {
        userDeps: []
      }

    }
  },
  mounted() {
  },
  methods: {
    [CRUD.HOOK.afterDoInfo](crud, info) {
      if (!info.userInfo) {
        this.info.userInfo = defaultUserInfo
      }
      this.activeName = 'user'
      return true
    },
    handleClick(tab, event) {
      if (tab.name === 'userRole') {
        getRolesByUserId(this.info.id).then(res => {
          this.role.userRoles = res.data
        }).catch(() => {
          this.role.userRoles = []
        })
      } else if (tab.name === 'userDep') {
        getUserDeps({ userId: this.info.id }).then(res => {
          this.dep.userDeps = res.data
        }).catch(() => {
          this.dep.userDeps = []
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
